@charset "UTF-8";
@import "reset";
//处理px单位的值，转换为rem单位；
@function r($px) {
    @return $px/100px*1rem;
}

//头部样式
* {
    font-size: 0;
}

.web {
    //  头部
    .head {
        height: r(89px);
        background-color: #b20000;
        color: white;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 r(20px);
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1;
        >div:first-child {
            width: r(49px);
            height: r(43px);
            position: relative;
            i{
                font-size: r(30px);
                position: absolute;
                left: 0;
                bottom: 0;
            }
            img{
                width: r(26px);
                height: r(26px);
                position: absolute;
                right: 0;
                top: 0;
            }
        }
        >a{
            >img {
                width: r(264px);
            }
        }
        >div:last-child {
            border: r(3px) solid white;
            border-radius: r(50px);
            display: flex;
            padding: r(6px);
        }
    }

    //      尾部样式
    footer{
        
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1;
        border-top: 1px solid #bbb9ba;
        .tail{
            height: r(96px);
            display: flex;
            justify-content: space-around;
            align-items: center;
            background-color: #f5f5f5;
            li{
                text-align: center;
                &:first-child{
                    img{
                        width: r(47px);
                        height: r(38px);
                    }
                }
                &:nth-child(2){
                    img{
                        width: r(48px);
                        height: r(40px);
                    }
                }
                &:nth-child(3){
                    img{
                        width: r(41px);
                        height: r(41px);
                    }
                    p{
                        color: #b60005;
                    }
                }
                &:nth-child(4){
                    img{
                        width: r(42px);
                        height: r(46px);
                    }
                }
                &:last-child{
                    img{
                        width: r(70px);
                        height: r(43px);
                    }
                }
                p{
                    font-size: r(18px);
                    color: #8b8b8b;
                }
            }
        }
    }
}